import React from 'react';
import { useFormik } from 'formik'
import * as Yup from 'yup'
import axios from 'axios'
import styled from '@emotion/styled'
import { css } from '@emotion/core'


const login = css`
    width: 400px;
    height: 400px;
    padding: 50px 50px 30px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 8px rgb(0 0 0 / 10%);
    vertical-align: middle;
    display: inline-block; 
    box-sizing: border-box;
`

const title = css`
    font-weight: 700;
    color: #ea6f5a;
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
    & > span {
        border-bottom: 2px solid #ea6f5a;
    }
`
const Input = styled.input`
    width: 100%;
    height: 50px;
    margin-bottom: 0;
    padding: 4px 12px 4px 35px;
    border: 1px solid #c8c8c8;
    border-radius: 0 0 4px 4px;
    background-color: hsla(0,0%,71%,.1);
    vertical-align: middle;
    box-sizing: border-box;
`
const Button = styled.button`
    margin-top: 20px;
    width: 100%;
    padding: 9px 18px;
    font-size: 18px;
    border: none;
    border-radius: 25px;
    color: #fff;
    background: #3194d0;
    cursor: pointer;
    outline: none;
    display: block;
    clear: both;
    box-sizing: border-box;
`

function Login () {
    const formik = useFormik({initialValues: {email: '', password: ''},
        onSubmit: (values) => {
            axios.post('https://conduit.productionready.io/users/login', values).then(res => {
                console.log(123123, res)
            })
        },
        validationSchema: Yup.object({
            email: Yup.string()
                .required('请输入邮箱'),
            password: Yup.string()
                .required('请输入密码')
        })
    })

    return (
        <form onSubmit={formik.handleSubmit} css={login}>
            <div css={title}><span>登录</span></div>
            <Input type="text" name="email" {...formik.getFieldProps('email')} /> 
            {formik.touched.email && formik.errors.email ? <div>{formik.errors.email}</div>: null} 
            <Input type="password" name="password" {...formik.getFieldProps('password')} /> 
            {formik.touched.password && formik.errors.password ? <div>{formik.errors.password}</div>: null}
            <Button as="input" type="submit"/>  
        </form>
    )
}

export default Login